<template>
  <div class="page">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body">
              <div class="layui-form" lay-filter='djlist' style="font-size:15px;">

                  <div class="layui-form-item">
                  <label class="layui-form-label">会员等级</label>
                  <div class="layui-input-inline">
                    <select name="gradeSetting" lay-filter="gradeSetting" v-model="itemData.gradeSetting.id">
                      <option v-for="(item,index) in djlist" :value="item.id" :key="index">{{item.name}}</option>
                    </select>
                  </div>
                </div>
								
								<div class="layui-form-item">
                  <label class="layui-form-label">开户配赠设置类型</label>
                  <div class="layui-input-inline">
                    <select name="gradetype" lay-filter="gradetype" v-model="itemData.type">
                      <option value="BOOK">开户费</option>
                      <option value="REGION">绑定区域</option>
                      <option value="DISTRICT">绑定商圈</option>
                    </select>
                  </div>
                </div>
								
                <div class="layui-form-item">
                  <label class="layui-form-label">WDT配赠</label>
                  <div class="layui-input-inline" style="width: 190px;">
                    <input
                      type="text"
                      name
                      placeholder="输入(专项资产)配赠"
                      v-model="itemData.balanceZxzc"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>          

                <div class="layui-form-item">
                  <label class="layui-form-label">UC配赠</label>
                  <div class="layui-input-inline" style="width: 190px;">
                    <input
                      type="text"
                      name="balanceUc"
                      placeholder="请输入配赠费"
                      v-model="itemData.balanceUc"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
								<div class="layui-form-item">
                  <label class="layui-form-label">WUC配赠</label>
                  <div class="layui-input-inline" style="width: 190px;">
                    <input
                      type="text"
                      name="balanceUc"
                      placeholder="请输入配赠费"
                      v-model="itemData.balanceWuc"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">消费工分</label>
                  <div class="layui-input-inline" style="width: 190px;">
                    <input
                      type="text"
                      name="balanceXfgf"
                      placeholder="请输入消费工分费"
                      v-model="itemData.balanceXfgf"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">授信</label>
                  <div class="layui-input-inline" style="width: 190px;">
                    <input
                      type="text"
                      name="balanceCreditUc"
                      placeholder="请输入授信费"
                      v-model="itemData.balanceCreditUc"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">红包次数</label>
                  <div class="layui-input-inline" style="width: 190px;">
                    <input
                      type="number"
                      name="redFrequency"
                      placeholder="请输入红包次数"
                      v-model="itemData.redFrequency"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                
                <div class="layui-form-item" id="test1">
                  <label class="layui-form-label">易栈比例</label>
                  <div class="layui-input-inline" style="width: 190px;">
                    <input
                      type="number"
                      name="stackRebate"
                      placeholder="请输入易栈返点比例"
                      v-model="itemData.stackRebate"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                  <div class="layui-form-mid">%</div>
                <div class="layui-form-mid layui-word-aux">共享链上易栈返点比例,如10表示10%</div>
                </div>

                <div class="layui-form-item" id="test2">
                  <label class="layui-form-label">易庄比例</label>
                  <div class="layui-input-inline" style="width: 190px;">
                    <input
                      type="number"
                      name="villageRebate"
                      placeholder="请输入易庄返点比例"
                      v-model="itemData.villageRebate"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                  <div class="layui-form-mid">%</div>
                <div class="layui-form-mid layui-word-aux">共享链上易庄返点比例,如10表示10%</div>
                </div>

 


                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button
                      class="layui-btn layui-btn-normal"
                      lay-submit
                      lay-filter="setmyinfo"
                      @click="sure"
                    >确认</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "gradeadd",
  data() {
    return {
      id: "",
      itemData: {
        balanceZxzc: "", //WDT(专项资产)配赠
        balanceUc: "", //UC配赠
        balanceXfgf: "", //消费工分
        balanceCreditUc:"",//授信
        redFrequency: "", //红包次数
        stackRebate: "", //共享链上易栈返点比例
        villageRebate: "", //共享链上易庄返点比例
        type:'BOOK',
        balanceWuc:'',
        gradeSetting:{
            id:"",
            name:""
        }//会员等级
      },
      djlist: [], //会员等级

    };
  },
  mounted() {
    var _this = this;
    this.getdj(); //会员等级
    window.getdates = this.getdates;
  },
  methods: {
    getdates: function (data) {
      //回选详情
      var _this = this;
      var url = "/profit/aapi/v1.9/grade-type-setting/" + data.id;
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        //alert(JSON.stringify(ret))
        _this.itemData = ret.data;
        _this.id = ret.data.id;
        _this.itemData.balanceZxzc = ret.data.balanceZxzc / 100;
        _this.itemData.balanceUc = ret.data.balanceUc / 100;
        _this.itemData.balanceXfgf = ret.data.balanceXfgf / 100;
        _this.itemData.balanceCreditUc = ret.data.balanceCreditUc / 100;
        _this.itemData.balanceWuc = ret.data.balanceWuc / 100;
        if(ret.data.gradeSetting.id==1){
            document.getElementById("test1").style.display="";
            document.getElementById("test2").style.display="";
        }else if(ret.data.gradeSetting.id==2){
            document.getElementById("test1").style.display="none";
            document.getElementById("test2").style.display="";
        }else {
            document.getElementById("test1").style.display="none";
            document.getElementById("test2").style.display="none";
        }
      });
    },
    getdj: function () {
      var _this = this;
      var url = "/profit/aapi/v1.9/grade-type-setting/grade/settingList";
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        _this.djlist = ret.data;
      });
    },
    sure: function () {
      var _this = this;
      var hat = "POST";
      var dates = _this.itemData;
      dates.balanceZxzc = _this.itemData.balanceZxzc * 100;
      dates.balanceUc = _this.itemData.balanceUc * 100;
      dates.balanceXfgf = _this.itemData.balanceXfgf * 100;
      dates.balanceCreditUc = _this.itemData.balanceCreditUc * 100;
      dates.balanceWuc = _this.itemData.balanceWuc * 100;
      if (_this.id) {
        dates.id = _this.id;
        hat = "PUT";
      }
      var url = "/profit/aapi/v1.9/grade-type-setting";
      // alert(JSON.stringify(dates))
      ajaxRequest(url, hat, "json", dates, function (ret, err) {
        layer.msg("操作成功");
        setTimeout(function () {
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
            parent.location.reload();
        }, 1000);
      });
    },
  },
  updated: function () {
    var _this = this;
    layui.use("form", function () {
      var form = layui.form;
      form.render();
      form.render(null,'gradeSetting');
      form.on("select(gradeSetting)", function (data) {
        //等级类型
        _this.itemData.gradeSetting.id = data.value;
        if(data.value==1){
            document.getElementById("test1").style.display="";
            document.getElementById("test2").style.display="";
        }else if(data.value==2){
            document.getElementById("test1").style.display="none";
            document.getElementById("test2").style.display="";
        }else {
            document.getElementById("test1").style.display="none";
            document.getElementById("test2").style.display="none";
        }
      });
      form.on("select(gradetype)", function (data) {
      		_this.itemData.type=data.value
      })
    });
  },
};
</script>
<style>
</style>